<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 成绩汇总
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-select v-model="subjectSearch" placeholder="课程" class="handle-select mr10">
          <el-option v-for="item in subjects"
                     :key="item.subjectName"
                     :label="item.subjectName"
                     :value="item.id"></el-option>
        </el-select>
<!--        <el-input v-model="subjectSearch" placeholder="课程名称" class="handle-input mr10"></el-input>-->
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </div>
      <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
        <!--                <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>-->
        <!--        <el-table-column prop="name" label="用户名"></el-table-column>-->
        <el-table-column label="学生学号">
          <template #default="scope">{{ scope.row.studentNum }}</template>
        </el-table-column>

        <el-table-column label="学生姓名">
          <template #default="scope">{{ scope.row.studentName }}</template>
        </el-table-column>
        <el-table-column label="专业">
          <template #default="scope">{{ scope.row.studentMajor }}</template>
        </el-table-column>
        <el-table-column label="考试成绩">
<!--          <template #default="scope">{{ scope.row.examGradRecord }}</template>-->
          <template #default="scope">
            <el-input v-model="tableData[scope.$index].examGradRecord"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="表现成绩" prop>
          <template #default="scope">
            <el-input v-model="tableData[scope.$index].performanceGrad"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="totleGrad" label="总成绩">
          <template #default="scope">
            <el-input v-model="tableData[scope.$index].totleGrad" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template #default="scope">
            <el-button type="primary" @click="saveEdit(scope.row)">保 存</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--      <div class="pagination">-->
      <!--        <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"-->
      <!--                       :page-size="query.pageSize" :total="pageTotal"-->
      <!--                       @current-change="handlePageChange"></el-pagination>-->
      <!--      </div>-->
    </div>

    <!-- 编辑弹出框 -->
    <!--    <el-dialog title="编辑" v-model="editVisible" width="30%">-->
    <!--      <el-form label-width="70px">-->
    <!--        <el-form-item label="用户名">-->
    <!--          <el-input v-model="form.name"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="地址">-->
    <!--          <el-input v-model="form.address"></el-input>-->
    <!--        </el-form-item>-->
    <!--      </el-form>-->
    <!--      <template #footer>-->
    <!--                <span class="dialog-footer">-->
    <!--                    <el-button @click="editVisible = false">取 消</el-button>-->
    <!--                    <el-button type="primary" @click="saveEdit">确 定</el-button>-->
    <!--                </span>-->
    <!--      </template>-->
    <!--    </el-dialog>-->
  </div>
</template>

<script>
import {selectClassGrad,selectMySubjectByParam,markGradeToStu} from "../api";

export default {
  name: "StudentsGrads",
  data() {
    return {
      subjectSearch: '',
      tableData: [
        {
          studentNum:'',
          studentName:'',
          majorName:'',
          subjectName: '',
          examGradRecord: '',
          performanceGrad: '',
          totleGrad: '',
        }
      ],
      subjects:[],
      gradInfo:{
        studentNum:'',
        examGradRecord:'',
        performanceGrad:'',
        subjectId:'',
        subjectName:'',
        studentName:'',
      }
    }
  },
  methods:{
    handleSearch(){
      selectClassGrad({subjectId:this.subjectSearch}).then(res => {
        if(res.code === '200'){
          this.tableData = res.data;
          this.$message.success("查询成功");
        }else{
          this.$message.error(res.message);
        }
      })
    },
    saveEdit(row){
      this.gradInfo.studentNum = row.studentNum;
      this.gradInfo.performanceGrad = row.performanceGrad;
      this.gradInfo.examGradRecord = row.examGradRecord;
      this.gradInfo.subjectId = this.subjectSearch;
      markGradeToStu(this.gradInfo).then(res => {
        if(res.code === '200'){
          this.$message("成功");
          this.handleSearch();
        }else {
          this.$message(res.message);
        }
      })
    },
    queryMySubject(){
      selectMySubjectByParam().then(res => {
        if(res.code === '200'){
          this.subjects = res.data;
          console.log(res.data);
        }
      })
    },
  },
  mounted() {
    this.queryMySubject();
  }
}
</script>

<style scoped>

</style>